<template>
  <div>
  <!--整个页面的外层标签-->
  <el-container>
    <!--      整个页面的上半部分-->
    <el-header class="layout-header"  >
      拾文博客
      <el-dropdown :hide-on-click="false" style="float: right;font-size: 15px;color: #ffffff">
        <img src="https://i.52112.com/icon/256/20160616/2231/122256.png" alt=""
             style="width:40px; height:40px;margin:10px 50px 0 0">
        <el-dropdown-menu slot="dropdown" v-if="Token!=null">
          <el-dropdown-item>
            <a href="javascript:void(0)" @click="logout">退出登录</a>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>

    <!--  整个页面的下半部分  是一个容器  -->
    <el-container class="layout-body" >
      <!--        下半部分左侧边栏，显示菜单-->
      <el-aside class="layout-aside" style="width: 300px">
        <!--el-menu 是整个菜单-->
        <el-menu
            router
            default-active ="/admin/user/list"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
        >

          <!--权限管理-->
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-user-solid"></i>
              <span>权限管理</span>
            </template>


            <!--在el-submenu下的用于配置包含子菜单的父级项-->
            <el-menu-item index="/admin/user/list">
              <i class="el-icon-location"></i>
              <span>用户管理</span>
            </el-menu-item>

            <el-menu-item index="/admin/role/list">
              <i class="el-icon-location"></i>
              <span>角色管理</span>
            </el-menu-item>

            <el-menu-item index="/admin/menu/list">
              <i class="el-icon-location"></i>
              <span>菜单管理</span>
            </el-menu-item>
          </el-submenu>

          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>文章管理</span>
            </template>

            <el-menu-item index="/admin/article/list">
              <i class="el-icon-location"></i>
              <span>文章列表</span>
            </el-menu-item>
            <el-menu-item index="/admin/article/examine">
              <i class="el-icon-location"></i>
              <span>文章审核</span>
            </el-menu-item>
            <el-menu-item index="/admin/category/list">
              <i class="el-icon-location"></i>
              <span>分类列表</span>
            </el-menu-item>

            <el-menu-item index="/admin/tag/list">
              <i class="el-icon-location"></i>
              <span>标签列表</span>
            </el-menu-item>


          </el-submenu>

          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>相册管理</span>
            </template>
            <el-menu-item index="/admin/banner/list">
              <i class="el-icon-location"></i>
              <span>轮播图列表</span>
            </el-menu-item>
          </el-submenu>

          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>网站管理</span>
            </template>
            <el-menu-item index="/admin/link/list">
              <i class="el-icon-location"></i>
              <span>友情链接</span>
            </el-menu-item>
          </el-submenu>

          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>评论管理</span>
            </template>
            <el-menu-item index="/admin/comment/list">
              <i class="el-icon-location"></i>
              <span>评论列表</span>
            </el-menu-item>
          </el-submenu>

        </el-menu>

      </el-aside>

      <!-- 下半部分的右侧，即主题部分，将有router-view实现具体实现-->
      <el-main>
        <router-view/>
      </el-main>
    </el-container>

  </el-container>
  </div>
</template>



<script>
export default {
  data() {
    return {
      Token: "",
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    logout() {
      let then = this;
      this.$confirm('是否确认退出?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //清除token
        localStorage.removeItem("jwt"),
            then.$message({
              type: 'success',
              message: "退出成功！"
            })
        //刷新页面
        setTimeout(()=>{
          this.$router.push('/login');
          //延迟时间：0.8秒
        },800)
      })
    },
  },
  created() {
    this.Token = localStorage.getItem("jwt")
    // console.log(this.Token)
  }

}
</script>



<style>
*{
  margin:0;
}
.layout-header{background-color:  #cedebd ; color: #ffffff; text-align: center; font-size: 30px ;line-height:inherit}
.layout-aside{
  background:  #cedebd;text-align: left;

}

.layout-body{
  position: fixed;
  top:60px;
  bottom: 0;
  left: 0;
  right: 0;
}


.header {
  height: 90px;
  background: red;
  text-align: center;
  color: #fff;
}
.nav{
  padding:15px;
  width:100%;
  box-sizing: border-box;
  background:greenyellow;
  text-align: center;
}
.navBarWrap {
  position:fixed;
  top:0;
  z-index:999;
}

</style>